<template>
	<view class="container">
		<!-- 消息提醒设置 -->
		<view class="notification-tip" @click="openNotificationSettings">
			<uni-icons type="notification" size="16" color="#1989fa"></uni-icons>
			<text>当前无法获取新消息提醒，点击设置</text>
		</view>

		<!-- 禁止发布提示 -->
		<view class="forbidden-tip">
			<text>禁止发布违法、违规、虚假、侵权等内容</text>
		</view>

		<!-- 内容输入区域 -->
		<view class="input-card" :style="{transform: 'rotateY(5deg)'}">
			<textarea class="content-input" placeholder="说点什么吧~（请输入投稿内容）" v-model="content" maxlength="500"
				placeholder-class="placeholder" @input="updateRemainingChars"></textarea>
			<text class="char-count">{{ remainingChars }}/500</text>
		</view>

		<!-- 规则提示 -->
		<view class="rules-card" :style="{transform: 'rotateY(-5deg)'}">
			<view class="rule-item">
				<uni-icons type="checkmark" size="16" color="#52c41a"></uni-icons>
				<text>普通消息免费发布</text>
			</view>
			<view class="rule-item">
				<uni-icons type="checkmark" size="16" color="#52c41a"></uni-icons>
				<text>商业推广联系管理员审核</text>
			</view>
			<view class="rule-item">
				<uni-icons type="close" size="16" color="#ff4d4f"></uni-icons>
				<text>招聘|商业推广私自发布会被禁言</text>
			</view>
			<view class="rule-item">
				<uni-icons type="info" size="16" color="#1989fa"></uni-icons>
				<text>付费跑腿求助移步|互助专区更高效</text>
			</view>
		</view>

		<!-- 联系方式按钮 -->
		<view class="contact-btn" :style="{transform: 'rotateY(5deg)'}" @click="openContactForm">
			<text>点我填写联系方式，方便其他同学联系</text>
			<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
		</view>

		<!-- 发布选项 -->
		<view class="options-card" :style="{transform: 'rotateY(-5deg)'}">
			<view class="option-item">
				<text>发布后置顶</text>
				<switch :checked="pinAfterPublish" @change="togglePin" color="#1989fa" />
			</view>
			<view class="option-item">
				<text>主题分类</text>
				<picker mode="selector" :range="categories" range-key="name" @change="selectCategory">
					<view class="picker">
						{{ selectedCategory.name || '请选择分类' }}
						<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
		</view>

		<!-- 发布按钮 -->
		<button class="publish-btn" :disabled="!canPublish" @click="handlePublish">
			发布
		</button>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 模拟数据
	const categories = ref([{
			id: 1,
			name: '校园资讯'
		},
		{
			id: 2,
			name: '二手交易'
		},
		{
			id: 3,
			name: '学习交流'
		},
		{
			id: 4,
			name: '生活服务'
		},
		{
			id: 5,
			name: '其他'
		}
	])

	const hotList = ref([
		'校园周边新开了一家奶茶店，同学们快去打卡',
		'求代课：周三上午三四节计算机课程',
		'图书馆自习室新增了充电插座',
		'校园跑腿互助需求激增，快来参与',
		'毕业季二手交易市场火热进行中'
	])

	// 表单数据
	const content = ref('')
	const remainingChars = ref(500)
	const pinAfterPublish = ref(false)
	const selectedCategory = ref({})
	const contactInfo = ref({
		phone: '',
		wechat: '',
		qq: ''
	})

	// 计算属性
	const canPublish = computed(() => {
		return content.value.length > 0 && selectedCategory.value.id
	})

	// 方法
	const updateRemainingChars = (e) => {
		remainingChars.value = 500 - e.detail.value.length
	}

	const togglePin = (e) => {
		pinAfterPublish.value = e.detail.value
	}

	const selectCategory = (e) => {
		selectedCategory.value = categories.value[e.detail.value]
	}

	const openContactForm = () => {
		uni.navigateTo({
			url: '/pages/publish/contact'
		})
	}

	const openNotificationSettings = () => {
		uni.navigateTo({
			url: '/pages/settings/notification'
		})
	}

	const handlePublish = () => {
		if (!canPublish.value) return

		uni.showLoading({
			title: '发布中...'
		})

		// 模拟API请求
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '发布成功',
				icon: 'success'
			})
			// 重置表单
			content.value = ''
			remainingChars.value = 500
			pinAfterPublish.value = false
			selectedCategory.value = {}
		}, 1500)
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
		padding-bottom: 120rpx;

		.notification-tip {
			display: flex;
			align-items: center;
			background-color: #e6f7ff;
			padding: 16rpx 20rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			uni-icons {
				margin-right: 10rpx;
			}

			text {
				font-size: 24rpx;
				color: #1989fa;
			}
		}

		.forbidden-tip {
			background-color: #fff2f0;
			padding: 16rpx 20rpx;
			border-radius: 8rpx;
			margin-bottom: 30rpx;

			text {
				font-size: 24rpx;
				color: #ff4d4f;
			}
		}

		.input-card,
		.rules-card,
		.contact-btn,
		.options-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;
			perspective: 1000px;
			transform-style: preserve-3d;

			&:active {
				transform: scale(0.98) rotateY(0deg);
			}
		}

		.input-card {
			.content-input {
				width: 100%;
				min-height: 200rpx;
				font-size: 28rpx;
				color: #333;
			}

			.placeholder {
				color: #ccc;
				font-size: 28rpx;
			}

			.char-count {
				font-size: 24rpx;
				color: #999;
				text-align: right;
				display: block;
				margin-top: 10rpx;
			}
		}

		.rules-card {
			.rule-item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				&:last-child {
					margin-bottom: 0;
				}

				uni-icons {
					margin-right: 12rpx;
				}

				text {
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		.contact-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 24rpx;

			text {
				font-size: 26rpx;
				color: #1989fa;
			}
		}

		.options-card {
			.option-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 0;

				&:first-child {
					border-bottom: 1rpx solid #f0f0f0;
				}

				text {
					font-size: 28rpx;
					color: #333;
				}

				.picker {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #666;

					uni-icons {
						margin-left: 10rpx;
					}
				}
			}
		}

		.publish-btn {
			position: fixed;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;
			background-color: #ccc;
			color: #fff;
			border-radius: 50rpx;

			&[disabled] {
				background-color: #1989fa;
			}
		}

	}
</style>